<%@page contentType="text/html" %>
<%@page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>JSP Page</title>
    <link type="text/css" rel="stylesheet" href="/css/articlelist.css"/>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="/css/myinfo.css"/>
    <style>
        body.* {
            font-family: "微软雅黑";
        }

        .article {
            -webkit-box-shadow: none;
            box-shadow: none;
            border-bottom: 1px solid #f0f2f7;
            margin-bottom: 0px;
            background: #fff;
            overflow: hidden;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
            box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .article>.media-body>p>a {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .content a {
            text-decoration: none;
        }

        @media (max-width:768px) {
            form {
                display: none;
            }
            .myul {
                position: absolute;
                top: 0px;
                left: 50%;
            }
            .myul li {
                float: left;
            }
            .navbar-nav>li>ul>.dropdown-menu {
                min-width: 106px;
            }
        }
        #Live{
            color: #8590a6;
            font-size: 16px;
        }
        #Live:hover{
            color: #FFCF00;
        }
        #shudian{
            color: #8590a6;
            font-size: 16px;
        }
        #shudian:hover{
            color: #43D480;
        }
        #yuanzhuo{
            color: #8590a6;
            font-size: 16px;
        }
        #yuanzhuo:hover{
            color: #0084FF;
        }
        #zhuanlan{
            color: #8590a6;
            font-size: 16px;
        }
        #zhuanlan:hover{
            color: #0084FF;
        }
        #fufei{
            color: #8590a6;
            font-size: 16px;
        }
        #fufei:hover{
            color: #5478F0;
        }
        #row1:hover{
            background: #F6F6F6;
        }
        #row2:hover{
            background: #F6F6F6;
        }
        #row3:hover{
            background: #F6F6F6;
        }
        #row4:hover{
            background: #F6F6F6;
        }
        #row5:hover{
            background: #F6F6F6;
        }
        /*#divniubi{*/
            /*position: absolute;*/
            /*left: 50px;*/
        /*}*/
    </style>
</head>

<body>
<header>

    <div id="partofhead">
        <div id="shouye">
            <a href="">首页<span></span></a>
        </div>
        <div id="faxian">
            <a href="zhihu.jsp">发现<span></span></a>
        </div>
        <div id="dnld">
            <a href="file.jsp">等你来答<span></span></a>
        </div>
        <div id="sousuo">
            <form action="" method="">
                <div id="searchByTitle">
                    <input type="text" name="title" value="&nbsp;&nbsp;&nbsp;&nbsp;李方灏他长得帅吗"/>
                </div>
                <div id="searchByTitleSubmit">
                    <input type="submit" value="🔍"/>
                </div>
            </form>
        </div>
        <div>
            <img style="width: 75px; height: 50px;" src="/img/d22ccf189aa12bade15efe719fe46b0.png"/>
        </div>
        <div class="head-nav-con clearFloat tou">
            <li class="drop-down">
                <img src="/img/loginback.png"
                     style="border-radius: 3px;display: inline-block;width: 30px;height: 30px;"/>
                <ul class="drop-down-content" style="margin-left: -35px;">
                    <li>
                        <a href="#" style="margin-left: 20px;">
                            <svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                 style="margin-top: 5px; margin-left: -60px;">
                                <path d="M15.417 12.923c-.376.653-.837 1.281-.763 1.863.292 2.273 5.562 1.77 6.78 3.048.566.595.566.664.566 4.164-6.611-.07-13.363 0-20 0 .027-3.5 0-3.478.62-4.164 1.303-1.44 6.581-.715 6.78-3.133.045-.545-.38-1.114-.763-1.778C6.511 9.233 5.697 2 12 2s5.422 7.443 3.417 10.923z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            <p style="margin-top: -12px;">我的主页</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                 style="margin-top: 5px; margin-left: -40px;">
                                <path d="M20.868 17.185a.896.896 0 0 1-.452.137c-.123 0-1.397-.26-1.617-.233-1.354.014-1.78 1.276-1.835 1.742-.055.453 0 .892.191 1.303a.8.8 0 0 1-.068.851C16.224 21.877 14.922 22 14.73 22a.548.548 0 0 1-.356-.151c-.11-.096-.685-1.138-1.069-1.468-1.304-.955-2.247-.329-2.63 0-.398.33-.672.7-.836 1.125a.632.632 0 0 1-.329.37c-1.354.426-2.918-.919-3.014-1.056a.564.564 0 0 1-.123-.356c-.014-.138.383-1.276.342-1.688-.342-1.9-1.836-1.687-2.096-1.673a3.192 3.192 0 0 0-.918.178.873.873 0 0 1-.59-.055c-.887-.462-1.136-2.332-1.109-2.51.055-.315.192-.521.438-.604.425-.164.809-.452 1.151-.85.931-1.262.343-2.25 0-2.634-.342-.356-.726-.645-1.15-.809-.138-.041-.234-.151-.33-.316-.38-1.434.613-2.552.867-2.77.255-.22.6-.055.723 0 .425.164.877.219 1.343.15C6.7 6.636 6.784 5.141 6.81 4.908c.014-.247-.11-1.29-.137-1.4a.488.488 0 0 1 .027-.315C7.317 2.178 9.071 2 9.222 2a.56.56 0 0 1 .439.178c.11.124.63 1.111 1 1.4.4.338 1.583.83 2.59.013.397-.274.959-1.29 1.082-1.413A.55.55 0 0 1 14.717 2c1.56 0 2.329 1.029 2.438 1.22a.458.458 0 0 1 .069.371c-.028.151-.329 1.152-.26 1.605.365 1.537 1.383 1.742 1.89 1.783.493.028 1.644-.356 1.809-.343a.63.63 0 0 1 .424.206c.535.31.85 1.715.905 2.14.027.233-.014.439-.11.562-.11.138-1.165.714-1.48 1.112-.855.982-.342 2.25-.068 2.606.26.37 1.22.905 1.288.96.15.137.26.302.315.494.146 1.413-.89 2.387-1.069 2.47zm-8.905-.535c.644 0 1.246-.123 1.822-.356a4.576 4.576 0 0 0 1.493-1.016 4.694 4.694 0 0 0 1-1.495c.247-.562.357-1.18.357-1.81 0-.659-.11-1.262-.356-1.825a4.79 4.79 0 0 0-1-1.481 4.542 4.542 0 0 0-1.494-1.002 4.796 4.796 0 0 0-3.631 0 4.627 4.627 0 0 0-1.48 1.002c-.424.425-.767.919-1 1.481a4.479 4.479 0 0 0-.37 1.825c0 .644.124 1.248.37 1.81a4.62 4.62 0 0 0 1 1.495c.425.426.918.768 1.48 1.016a4.677 4.677 0 0 0 1.809.356z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            <p style="margin-top: -12px;">设置</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
							<span>
									<svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                         style="margin-top: 5px; margin-left: -40px;">
										<path d="M2 11.999c0-2.756 1.154-5.417 3.167-7.3a1.266 1.266 0 0 1 1.73 1.847 7.396 7.396 0 0 0-2.367 5.453c0 4.119 3.35 7.47 7.47 7.47 4.119 0 7.47-3.351 7.47-7.47a7.41 7.41 0 0 0-2.279-5.37 1.266 1.266 0 0 1 1.76-1.819A9.923 9.923 0 0 1 22 12c0 5.513-4.486 10-10 10s-10-4.487-10-10zm8.699-.482V3.26a1.26 1.26 0 1 1 2.52 0v8.257a1.26 1.26 0 1 1-2.52 0z"
                                              fill-rule="evenodd"></path>
									</svg>
									<p style="margin-top: -12px;">退出</p>
                        </a>
                    </li>
                </ul>
            </li>
        </div>
    </div>
    </div>
</header>
<div id="backgroundcolor">
    <div id="header">
        <div id="headerBackImg">
            <img src="/file/upload/UserBackPhoto/${sessionScope.User.backphoto}">
        </div>
        <div id="headimg">
            <img src="/file/upload/UserHeadPhoto/${sessionScope.User.headphoto}">
            <%--<img src="{$headimgurl}">--%>
        </div>
        <div id="headerName">
            <span id="userName" class="span1">${sessionScope.User.nickname}</span>
            <span id="userAddress" class="span1">居住地</span>
            <span id="userHobby" class="span1">爱好</span>
            <span id="birthday" class="span1">生日</span>
            <span id="describe" class="span1">个人简介</span>
            <span id="userAddressTxt" class="span2">${sessionScope.User.address}</span>
            <span id="hobbyTxt" class="span2">${sessionScope.User.hobby}</span>
            <span id="birthTxt" class="span2">${sessionScope.User.birthday}</span>
            <span id="descTxt" class="span2">${sessionScope.User.describes}</span>
            <div id="con">
                <a href="/jsp/individual.jsp" id="info">编辑个人信息</a>
            </div>
        </div>
        <div id="middle">
            <a href="" id="dongtai">动态</a>
            <a href="" id="wenda">问答</a>
            <a href="" id="tiwen">提问</a>
            <a href="" id="wenzhang">文章</a>
            <a href="" id="zhuanlan">专栏</a>
            <a href="" id="xiangfa">想法</a>
            <a href="" id="gengduo">更多</a>
        </div>
        <div class="d">
            <div class="d1">
                <a href="#">
                    <div class="span">
                        关注了
                    </div>
                    <strong>0</strong>
                </a>

            </div>
            <div class="d2">
                <a href="#">
                    <div class="span">
                        关注者
                    </div>
                    <strong>0</strong>
                </a>

            </div>
            <div class="E">
                <hr/>
                <a href="#">
                    <p class="left">关注的话题</p>
                    <p class="left01">0</p>
                </a>
                <hr/>
                <a href="#">
                    <p class="left">关注的专题</p>
                    <p class="left01">0</p>
                </a>
                <hr/>
                <a href="#">
                    <p class="left">关注的问题</p>
                    <p class="left01">0</p>
                </a>
                <hr/>
                <a href="#">
                    <p class="left">关注的收藏夹</p>
                    <p class="left01">0</p>
                </a>
                <hr/>
                <div>
                    <a href="#">
                        <div class="left02">
                            个人主页被浏览43次
                        </div>
                    </a>
                </div>
                <hr style="margin-top: 20px;"/>
            </div>
            <footer class="left02" style="font-size: 13px;">
                <a>
                    刘看山&nbsp;·&nbsp;知乎指南&nbsp;·&nbsp;知乎协议知&nbsp;·&nbsp;乎隐私保护指引<br/>
                    应用&nbsp;·&nbsp;工作&nbsp;·&nbsp;申请开通知乎机构号<br/>
                    侵权举报&nbsp;·&nbsp;网上有害信息举报专区<br/>
                    京 ICP 证 110745 号<br/>
                    <img style="bottom: 10px;" src="/img/guohui.jpg"/>
                    京公网安备 11010802010035 号<br/>
                    违法和不良信息举报：010-82716601<br/>
                    儿童色情信息举报专区<br/>
                    证照中心<br/>
                    联系我们 © 2019 知乎
                </a>
            </footer>
        </div>

        <div id="middleSpan">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div id="wodetongtai">
            <p>我的动态</p>
        </div>
    </div>
    <div id="article" style="min-height: 300px">
        <c:forEach var="article" items="${sessionScope.articlesByUserList}" varStatus="status">
            <div id="divniubi" class="container article " style=" width: 694px;min-height: 265.89px;margin-top: 60px;margin-left: 200px; ">
                <div class="row ">
                    <div class="col-md-12 " style="margin-top: 20px; ">
                        <a href=" " style="display: inline-block; font-weight: 600;font-size: 18px; text-decoration: none;width: 198px; height: 23.1px; color: black; ">${article.title}</a>
                    </div>
                </div>
                <div class="row " style="word-wrap:break-word; word-break:break-all; ">
                    <div class="media ">
                        <div class="media-left ">
                            <a href="# " class="media-object ">
                                <img src="img/loginback.png " width="189.99px " height="105px " style="margin-top: 20px; margin-left: 20px;box-shadow: 2px 2px 2px #D4D4D4; " /></a>
                        </div>
                        <div class="media-body ">
                            <p>
                            <div class="content " style=" width: 450px;background-color:white;line-height: 26px;font-size: 15px; ">
                                <a href=" " style="text-decoration: none; ">${article.content}</a>
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row " style="margin-top: 10px; margin-left: -10px; ">
                    <div class="col-md-2 ">
                        <button id="hehe "  class="btn btn-default text-center " style="color: #0084ff;background: rgba(0,132,255,.1);border-color: transparent; font-size: 14px;border-radius: 3px; height: 31.35px; ">赞同    301</button>
                    </div>
                    <div class="col-md-1 ">
                        <button class="btn-default " style="border:1px solid;color: #0084ff;background: rgba(0,132,255,.1);border-color: transparent;font-size: 14px;border-radius: 3px;width: 35.96px; height: 31.35px; margin-left: -25px; ">
                            <span class="glyphicon glyphicon-thumbs-down "></span>
                        </button>
                    </div>
                    <div class="col-md-2" style="width: 200px;margin-left:40px;">
                        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;${article.beclick}条评论</button>
                    </div>
                    <div class="col-md-2" style="width: 200px;margin-left:-90px;">
                        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;分享</button>
                    </div>
                    <div class="col-md-2" style="width: 200px;margin-left:-120px;">
                        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;收藏</button>
                    </div>
                    <div class="col-md-2" style="width: 200px;margin-left:-120px;">
                        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;感谢</button>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
</body>

</html>